<template>
  <div>
		<el-dialog title="设置角色用户" :close-on-click-modal="false" v-model="visible" width="50%" @close="refreshEmit" >
			<div class="btnStyle">
				<div>
				<el-button  type="success" icon="ele-Plus" @click="addOrUpdateHandle()">添加</el-button>
				</div>
			</div>
			<el-table :data="roleUserList" border v-loading="dataListLoading" style="width: 100%;">
				<el-table-column prop="username"  label="用户名"></el-table-column>
				<el-table-column prop="staffName"  label="姓名"></el-table-column>
				<el-table-column prop="orgName"  label="部门"></el-table-column>
				<el-table-column fixed="right"  width="120" label="操作">
				<template #default="scope">
					<el-button type="primary" link  v-if="roleId !== '1' || (roleId === '1' && scope.row.userId !== '1')" @click="deleteHandle(scope.row.id)" >删除</el-button>
				</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onSelectSizeChange"
				@current-change="onSelectCurrentChange"
				:pager-count="5"
				:page-sizes="[10, 50, 200]"
				v-model:current-page="page"
				background
				v-model:page-size="limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total" small>
			</el-pagination>
		</el-dialog>
		<el-dialog :close-on-click-modal="false" v-model="innerVisible" width="50%" :append-to-body="true" @close="getDataList" :show-close="true">
			<el-form :inline="true" :model="queryPram.dataForm" @keyup.enter.native="queryUser()">
				<el-form-item>
					<el-input v-model="queryPram.dataForm.staffName" placeholder="姓名" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="queryPram.dataForm.orgName" placeholder="部门" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="ele-Search" @click="queryUser()">搜索</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="userList" border v-loading="dataUserListLoading" style="width: 100%;">
				<el-table-column prop="username"  label="用户名"></el-table-column>
				<el-table-column prop="staffName"  label="姓名"></el-table-column>
				<el-table-column prop="orgName"  label="部门"></el-table-column>
				<el-table-column fixed="right"  width="120" label="操作">
				<template #default="scope">
					<el-button type="primary" link  @click="selectHandle(scope.row.userId)" >添加</el-button>
				</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onSelectSizeChangeUser"
				@current-change="onSelectCurrentChangeUser"
				:pager-count="5"
				:page-sizes="[10, 50, 200]"
				v-model:current-page="queryPram.page"
				background
				v-model:page-size="queryPram.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalUser">
			</el-pagination>
		</el-dialog>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from 'vue';
import {systemApi} from '/@/api/systemapi'
import { ElMessage } from 'element-plus'
export default defineComponent ({
	setup(props, ctx) {
		const state = reactive({
			visible: false,
			roleId: '',
			total: 0,
			page: 1,
			limit: 10,
			roleUserList: [],
			dataListLoading: false,
			innerVisible: false,
			totalUser: 0,
			userList: [],
			dataUserListLoading: false,
			queryPram:{
				page: 1,
				limit: 10,
				roleId: '',
				dataForm:{
					staffName: '',
					orgName: ''
				}
			}
		})
		const refreshEmit = () => {
			closeDialog()
			ctx.emit('refreshDataList')
		}
		// 页面加载时
		onMounted(() => {
			// 列表查询
		})
		// 打开弹窗
		const openDialog = (id: string) => {
			state.roleId = id
			state.visible = true
			getDataList()
		}
		// 关闭弹窗
		const closeDialog = () => {
			state.visible = false;
		}
		const getDataList = () => {
			state.dataListLoading = true
			systemApi().getSysRoleUserList({
				'page': state.page,
				'limit': state.limit,
				'roleId': state.roleId
			}).then(data => {
				if (data && data.code === 0) {
					state.roleUserList = data.page.list
					state.total = data.page.totalCount
				} else {
					state.roleUserList = []
					state.total = 0
				}
			}).catch(() => {
				state.roleUserList = []
			}).finally(() => {
				state.dataListLoading = false
			})
		}
		const addOrUpdateHandle = () => {
			state.innerVisible = true
			queryUser()
		}
		const deleteHandle = (id:string) => {
			systemApi().deleteSysRoleUser(id).then(data => {
				if(data && data.code === 0){
					ElMessage.success('删除成功')
				}else{
					ElMessage.error(data.msg)
				}
			}).catch(() => {
				ElMessage.error('删除失败')
			}).finally(() => {
				getDataList()
			})
		}
		// 分页改变
		const onSelectSizeChange = (val: number) => {
			state.limit = val
			getDataList()
		}
		// 分页改变
		const onSelectCurrentChange = (val: number) => {
			state.page = val;
			getDataList()
		}
		const queryUser = () => {
			state.dataUserListLoading = true
			state.queryPram.roleId = state.roleId
			systemApi().getRoleUserNoChooseList(state.queryPram).then(data => {
				if (data && data.code === 0) {
					state.userList = data.page.list
					state.totalUser = data.page.totalCount
				} else {
					state.userList = []
					state.totalUser = 0
				}
			}).catch(() => {
				state.userList = []
			}).finally(() => {
				state.dataUserListLoading = false
			})
		}
		const selectHandle = (userId: string) => {
			state.dataUserListLoading = true
			systemApi().setSysRoleUser(userId, state.roleId).finally(() => {
				state.dataUserListLoading = false
				queryUser()
			})
		}
		// 分页改变
		const onSelectSizeChangeUser = (val: number) => {
			state.queryPram.limit = val
			queryUser()
		}
		// 分页改变
		const onSelectCurrentChangeUser = (val: number) => {
			state.queryPram.page = val;
			queryUser()
		}
		return{
			refreshEmit,
			openDialog,
			closeDialog,
			addOrUpdateHandle,
			deleteHandle,
			getDataList,
			onSelectSizeChange,
			onSelectCurrentChange,
			queryUser,
			selectHandle,
			onSelectSizeChangeUser,
			onSelectCurrentChangeUser,
			...toRefs(state),
		}
	}
})
</script>

<style>

</style>